const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
// const fs = require('fs');
/* //由于使用entry1写法，将在dll中生成很多不同的第三方包，在通过DllReferencePlugin，AddAssetHtmlPlugin这两个插件引入到项目的js/html文件中，需要额外设置
const files = fs.readdirSync(resolve(__dirname, './dll'));
//用于存储DllReferencePlugin插件的配置，只能引入对象
const dllReferenceFiles = [];
//用于存储AddAssetHtmlPlugin插件的配置，
const htmlAssetFiles = [];
files.forEach(file => {
  //匹配jquery.js引入
  if (/.*\.js$/.test(file)) {
    htmlAssetFiles.push({ filepath: resolve(__dirname, './dll', file) });
  }
  //匹配jquery.manifest.json
  if (/.*\.manifest.json$/.test(file)) {
    dllReferenceFiles.push({ manifest: resolve(__dirname, './dll', file) });
  }
});
console.log(htmlAssetFiles, dllReferenceFiles); */

module.exports = {
  entry: './src/js/index.js',
  output: {
    // filename: 'js/[name].js',//开发环境使用该输出文件名
    filename: 'js/[name].[contenthash:4].js', //生产环境打包使用该输出文件名，可以有效利用浏览器缓存
    path: resolve(__dirname, 'build'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    // 告诉webpack哪些库不参与打包，同时使用时的名称也得变~
    new webpack.DllReferencePlugin({
      manifest: resolve(__dirname, 'dll/vendors.manifest.json'),
    }),
    // 将某个文件打包输出去，并在html中自动移入该资源（报错就手动引）
    new AddAssetHtmlWebpackPlugin({
      filepath: resolve(__dirname, 'dll/vendors.js'),
    }),
    // ...dllReferenceFiles.map(obj => new webpack.DllReferencePlugin(obj)),
    // new AddAssetHtmlWebpackPlugin(htmlAssetFiles),
  ],
  mode: 'production',
  devtool: 'source-map',
};
